<!--项目工时-->
<template>
  <div class="jobHour">
    <el-select v-model="selectProject" placeholder="请选择">
      <el-option v-for="item in projectList" :key="item.value" :label="item.name" :value="item.value"></el-option>
    </el-select>
    <div style="margin: 32px">
      <p style="padding-left: 675px;">投入工时：<span style="color: #FEC171">240.0</span></p>
      <div id="hourChart" style="width:80%;height:215px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "jobHour",
  data(){
    return{
      projectList:[
        {name:'投入工时',value:'1'},
      ],
      selectProject:'1',
      jobList:[
        { value: 94, name: "风光一体化防沙治沙" },
        { value: 60, name: "三北六期" },
        { value: 54, name: "蚂蚁森林" },
        { value: 32, name: "蓝旗机器人造林" },
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods:{
    initChart(){
      const ctx = document.getElementById('hourChart')
      this.chart = echarts.init(ctx)

      let option = {
        color: ['green', '#9bd08c', '#abd79e', 'lightgreen'],
        legend: {
          itemHeight: 14,
          itemWidth: 14,
          icon: 'rect',
          orient: 'vertical',
          top: '10',
          right: '0%',
          textStyle: {
            align: 'left',
            color: '#',
            verticalAlign: 'middle',
            rich: {
              name: {
                width: 120,
                fontSize: 12
              },
              value: {
                width: 20,
                align: 'right',
                fontFamily: 'Medium',
                fontSize: 12
              },
              rate: {
                width: 10,
                align: 'right',
                fontSize: 12
              }
            }
          },
          data: this.jobList,
          formatter: (name) => {
            if (this.jobList.length) {
              const item = this.jobList.filter((item) => item.name === name)[0]
              return `{name|${name}}{value| ${item.value}} {rate| 个}`
            }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{d}%'
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '70%'],
            center: ['34%', '40%'],
            roseType: 'radius',
            label: {
              formatter: '{d}%'
            },
            labelLine: {
              length: 1,
              length2: 20
            },
            data: this.jobList
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.jobHour{
  margin: 10px;
}
</style>
